<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/server.css" />
</head>
<body class="gray">
	<div class="mui-content " style="padding-bottom: 20px;">
	    <div id="slider" class="mui-slider mui-fullscreen loading" >
	    		<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<a class="mui-control-item mui-active" href="#orderServer">订单服务</a>
				<a class="mui-control-item " href="#consult">询价订单</a>
				<a class="mui-control-item" href="#productServer">产品咨询</a>
	    		</div>
	    		<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4" style="top: -2px;">
	    			<div></div>
	    		</div>
	    		<div class="mui-slider-group " style="height: 100%;">
	    			<div id="orderServer" class="mui-slider-item mui-control-content mui-active" >
	    				<div id="scroll1" class="mui-scroll-wrapper ">
	    					<div class="mui-scroll">
	    					<div v-if="order.list.length==0">
	    						<p style	="text-align: center;padding:50px 0">您没订单哦！</p>
	    					</div>
	    					<template  v-for="(item,index) in order.list">
	    						<div class="item comment">
					  			<div class="product" >
					  				<ul class="mui-table-view">
				  						<li class="mui-table-view-cell table-cell-title"><span class="mui-pull-right">{{item.order_status_name}}</span>{{item.order_no}}</li>
				  						<li class="mui-table-view-cell mui-media">
					  				        <a href="javascript:;">
					  				            <img class="mui-media-object mui-pull-left link" :src="item.img" _id="detail" _href="detail.html" :_extras="'pid='+item.goods_id">
					  				            <div class="mui-media-body">
					  				               	<div class="name">
					  				               		{{item.name}}
					  				               	</div>
					  				               	<div class="merchant-name">
					  				               		<span class="mui-pull-right" >¥ {{item.goods_price}}</span>
					  				               		<div v-if="item.completion_time!='0000-00-00'" style="font-size: 14px;">成交日期：{{item.completion_time}}</div>
					  				               		<div v-else>&nbsp;</div>
					  				               	</div>
					  				               	<div class="handle">
					  				               		<button type="button" class="mui-btn bexta-btn  mui-btn-outlined link" _id="complain" _title="提交投诉" _href="complain.html" :_extras="'order_no='+item.order_no">投诉</button>
					  				               		<button type="button" class="mui-btn bexta-btn  mui-btn-outlined link" _id="consult" _title="订单咨询" _href="consult.html" :_extras="'order_no='+item.order_no ">咨询</button>
					  				               		<button type="button" class="mui-btn bexta-btn  mui-btn-outlined link" v-if="item.order_status==0" _id="confirmOrder" _title="订单确认" _href="confirmOrder.html" :_extras="'order_no='+item.order_no">详情</button>
					  				               		<button type="button" class="mui-btn bexta-btn  mui-btn-outlined link" v-else  _id="orderStatus" _href="orderStatus.html" _title="订单详细" :_extras="'order_no='+item.order_no">详情</button>
					  				               	</div>
					  				            </div>
					  				        </a>
					  				    </li>
					  				</ul>
					  			</div>
					  		</div>
	    					</template>
	    					<div class=" cainilike" v-if="order.like.length!=0">
					   	 	<div class="ts">猜你喜欢</div>
					   	 	<div class="mui-row">
					   	 		<template v-for="item in order.like">
									<div class="itemslink mui-col-xs-6 mui-col-sm-6 link" _id="detail" _href="detail.html" :_extras="'pid='+item.id">
					   	 				<img :src="item.img" alt="" />
						    				<p class="name">{{item.name}}</p>
						    				<p class="price" v-if="item.price!=0.00">¥{{item.price}}</p>
						    				<p class="price" v-else>询价</p>
					   	 			</div>		   	 			
					   	 		</template>
					   	 	</div>
					    </div>
	    				</div>
	    				</div>
	    			</div>
	    			<div id="consult" class="mui-slider-item mui-control-content">
	    				<div id="scroll3" class="mui-scroll-wrapper ">
	    					<div class="mui-scroll">
	    						<template v-for="(item,index) in consult.list">
	    							<ul class="mui-table-view">
	    						        <li class="mui-table-view-cell ords">
	    						        		<span class="mui-pull-right" v-if="item.status==0">等待反馈</span>
	    						        		<span class="mui-pull-right" v-if="item.status==1">已返馈</span>
	    						        		询价日期：{{item.add_time}}
	    						        </li>
	    						        <li class="mui-table-view-cell mui-media">
		    						        <a href="javascript:;">
		    						            <img class="mui-media-object mui-pull-left link" :src="item.img" _id="detail" _href="detail.html" :_extras="'pid='+item.goods_id" />
		    						            <div class="mui-media-body link" _id="consultContent" _href="consultContent.html" _title="询价详情" :_extras="'cid='+item.id">
		    						                {{item.name}}
		    						                <p>日期:{{item.activity_time}}</p>
		    						                <p><span>{{item.activity_type[2]}}</span><span>{{item.activity_type[0]}}</span></p>
		    						            </div>
		    						        </a>
		    						    </li>
		    						    <li class="mui-table-view-cell">
		    						    	&nbsp;
		    						    		<button type="button" class="mui-btn bexta-btn  mui-btn-outlined cancel" :data-id="item.id" :data-idx="index" >取消询价</button>
		    						    </li>
	    						    </ul>
	    						</template>
	    					</div>
	    				</div>
	    			</div>
				<div id="productServer" class="mui-slider-item mui-control-content">
	    				<div id="scroll2" class="mui-scroll-wrapper ">
	    					<div class="mui-scroll">
	    					<div class="mui-loading" v-if="pisActive">
							<div class="mui-spinner">
							</div>
						</div>
						<div v-else>
							<div class="issue-type" v-if="product.commend.length!=0">
		    						<div class="mui-content-padded" style="margin:0px 10px;">
		    							<div class="mui-row">
		    								<template v-for="item in product.commend">
		    									<div class="mui-col-xs-6 mui-col-sm-6 link" _id="issue" :_title="item.name" _href="issue.html" :_extras="'type='+item.id">
			    									<img :data-load="item.photo" src="../icon/mask-small.png" class="maximg" alt="" />
			    									<div>{{item.name}}</div>
			    								</div>
		    								</template>
		    								
		    							</div>
		    						</div>
		    					</div>
		    					<ul class="mui-table-view common-issue" v-if="product.list.length!=0">
	    					        <li class="mui-table-view-cell tile">常见问题</li>
	    					        <template v-for="(item,index) in product.list">
	    					        		<li class="mui-table-view-cell link flis" v-bind:style="index==0?'padding-top:0px':''"  _id="issueDetail" _title="问题详情" _href="issueDetail.html" :_extras="'issueid='+item.id">·{{item.title}}</li>
	    					        </template>
	    					    </ul>
						</div>
	    				</div>
	    				</div>
	    			</div>
	    		</div>
	    	</div>
	</div>
	

<script src="../js/mui-edit.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/bexta.js"></script>
<script>
	var apps, views, user, isActive = false, oldDate;
	mui.init({
		swipeBack: false
	});
	mui.plusReady(function () {
		bexta.toggleStatus(plus.webview.currentWebview());
	    bexta.getWebview().addEventListener('show', function(){
	    	bexta.setStatus(true);
		    	if(isActive){
		    		getservice(1, function(res){
					apps.order = res;
				});
		    	}
	    		
	    });
	});
window.addEventListener('readyVue', function(){
	if( !isActive ){
		isActive = !isActive;
		user = bexta.getStorage(USER);
		views = bexta.getWebview();
		getservice(1, function(res){
			initVue(res);
		});
	}
});
 mui.ready(function () {
//	document.querySelector('#slider').style.paddingTop = bexta.getStatusHeight() + 'px'; 	
//	document.querySelector('.mui-slider-group ').style.top = (40 + bexta.getStatusHeight() ) + 'px'; 
 });
function initVue(res){
	apps = new Vue({
		el:'#slider',
		data:{
			pisActive:true,
			order:res,  //订单服务
			consult:[],  //咨询订单
			product:[],  // 产品咨询
			name:'111'
		},
		mounted:function(){
			document.querySelector('.mui-slider-group ').style.top = (40 + bexta.getStatusHeight() ) + 'px'; 
			document.querySelector('.loading').classList.add('loadRun');
			document.querySelector('#sliderSegmentedControl').style.paddingTop = bexta.getStatusHeight() + 'px';
			mui('.mui-slider').slider();
			mui('.mui-scroll-wrapper').scroll();
			
			document.getElementById('slider').addEventListener('slide', function(e) {
				if( e.detail.slideNumber == 1 ){
					getservice(3, function(res){
						apps.consult = res;
					});
				}else if(e.detail.slideNumber == 2 && !oldDate ){
					//第一次获取
					oldDate = new Date().getTime();
					getservice(2, function(res){
						apps.pisActive = false;
						apps.product = res;
					});
				}else if( (e.detail.slideNumber == 2 && new Date().getTime() - oldDate) > 5*60*1000  ){
					//第二次是相隔五分钟获取一次
					oldDate = new Date().getTime();
					getservice(2, function(res){
						apps.product = res;
					});
				}
				bexta.imageLoad('[data-load]');
			});
			
			//取消询价
			mui('#slider').on('tap', '.cancel', function(){
				var cid = this.getAttribute('data-id');
				var idx = this.getAttribute('data-idx');
				bexta.ajax(api.del_goods_consult, function(res, msg){
					mui.toast(msg)
					if( !res ){
						apps.consult.list.splice(idx, 1);
					}
				}, {data:{uid:user.uid, id:cid}});
			});
			
			
		},
		updated:function(){
			bexta.imageLoad('[data-load]');
		}
	});
}
function getservice(otype, cfun){
	bexta.ajax(api.service, function(res){
		cfun(res);
	}, {data:{type:otype, uid:user.uid}});
}
</script>
</body>
</html>
